// Variables used across the app

// Helpers
$theme-color-interval: 8%;

@function tint-color($color, $level) {
  @return mix(white, $color, $level * $theme-color-interval);
}

@function shade-color($color, $level) {
  @return mix(black, $color, $level * $theme-color-interval);
}

// Basic Colors
$color-gray: #dae0ee;
$color-gray-warm: #cccccc;
$text-color: #555b68;
$color-elixir: #754fa2;
$color-elixir-accent: #6979db;
$color-phoenix: #f26d40;
$color-phoenix-accent: #dfa843;
$color-dashboard: #4575cf;
$color-dashboard-accent: #36a4ee;
$color-card-default: $text-color;

// Colors used when visualising data
$color-white: #ffffff;
$color-green: #4db167;
$color-blue: #5d89c7;
$color-purple: $color-elixir;
$color-yellow: #f9bc14;
$color-red: #fa412d;
$color-orange: $color-phoenix;
$color-dark-gray: shade-color($color-gray, 4);
$color-light-gray: tint-color($color-gray, 6);

// Basic
$color-gray-100: tint-color($color-gray, 8);
$color-gray-200: tint-color($color-gray, 6);
$color-gray-300: tint-color($color-gray, 4);
$color-gray-400: tint-color($color-gray, 2);
$color-gray-500: $color-gray;
$color-gray-600: shade-color($color-gray, 2);
$color-gray-700: shade-color($color-gray, 4);
$color-gray-800: shade-color($color-gray, 6);
$color-gray-900: shade-color($color-gray, 8);

$color-gray-warm-100: tint-color($color-gray-warm, 8);
$color-gray-warm-200: tint-color($color-gray-warm, 6);
$color-gray-warm-300: tint-color($color-gray-warm, 4);
$color-gray-warm-400: tint-color($color-gray-warm, 2);
$color-gray-warm-500: $color-gray-warm;
$color-gray-warm-600: shade-color($color-gray-warm, 2);
$color-gray-warm-700: shade-color($color-gray-warm, 4);
$color-gray-warm-800: shade-color($color-gray-warm, 6);
$color-gray-warm-900: shade-color($color-gray-warm, 8);

$color-elixir-100: tint-color($color-elixir, 8);
$color-elixir-200: tint-color($color-elixir, 6);
$color-elixir-300: tint-color($color-elixir, 4);
$color-elixir-400: tint-color($color-elixir, 2);
$color-elixir-500: $color-elixir;
$color-elixir-600: shade-color($color-elixir, 2);
$color-elixir-700: shade-color($color-elixir, 4);
$color-elixir-800: shade-color($color-elixir, 6);
$color-elixir-900: shade-color($color-elixir, 8);

// Shadows
$color-shadow: darken($color-gray, 5%);
$color-shadow-dark: darken($color-gray, 75%);
$box-shadow: 0 2px 5px change-color($color-shadow, $alpha: 0.5), 0 7px 20px change-color($color-shadow, $alpha: 0.75);
$box-shadow-lighter: 0 2px 5px change-color($color-shadow, $alpha: 0.15), 0 7px 20px change-color($color-shadow, $alpha: 0.3);
$box-shadow-darker: 0 2px 5px change-color($color-shadow-dark, $alpha: 0.15), 0 7px 20px change-color($color-shadow, $alpha: 0.3);
$bar-shadow: inset 0 0 0 1px $color-gray-600, inset 0 0 0 3px change-color($color-gray-100, $alpha: 0.15);
$bar-dark-shadow: inset 0 0 0 1px change-color($color-gray-900, $alpha: 0.25), inset 0 0 0 3px change-color($color-gray-100, $alpha: 0.15);

// Custom colors
$color-header: #4a4473;
$color-button-primary: #756f9a;
$color-button-secondary: $color-gray-warm-700;
$nav-pills-link-active-bg: #756f9a;

// Grid
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1600px,
  xxxl: 2600px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1300px,
  xxxl: 1500px
);

// Bootstrap variable overrides
$text-muted: change-color($text-color, $alpha: 0.5);
$grid-gutter-width: 24px;
$font-family-sans-serif: 'LiveDashboardFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$badge-border-radius: 3px;
$btn-border-radius: 3px;
$primary: $color-dashboard;

// Other
$border-radius: 6px;
